<template>
  <div class="ele-body">
    <a-form
      layout="horizontal"
      ref="form"
      :model="form"
      :rules="rules"
      :label-col="{ md: { span: 8 }, sm: { span: 24 } }"
      :wrapper-col="{ md: { span: 20 }, sm: { span: 24 } }"
    >
      <a-row>
        <a-col :span="16">
          <a-form-item label="邮箱:" name="email">
            <a-input v-model:value="form.email" placeholder="请输入邮箱" allow-clear autocomplete="off" />
          </a-form-item>
          <a-form-item label="地址:" name="address">
            <a-input v-model:value="form.address" placeholder="请输入地址" allow-clear autocomplete="off" />
          </a-form-item>
          <a-form-item label="电话:" name="phone">
            <a-input v-model:value="form.phone" placeholder="请输入联系电话" allow-clear autocomplete="off" />
          </a-form-item>
          <a-form-item label="地址地图:" name="addressMap">
            <a-input v-model:value="form.addressMap" type="hidden" />
            <a-upload
              list-type="picture-card"
              class="avatar-uploader"
              :headers="headers"
              :show-upload-list="false"
              :customRequest="uploadAddressMap"
            >
              <img v-if="addressMapUrl" :src="addressMapUrl" alt="avatar" class="imageUrl" style="max-width: 400px" />
              <div v-else>
                <div class="ant-upload-text">上传主图</div>
              </div>
            </a-upload>
          </a-form-item>
          <a-form-item label="微信一:" name="wx1">
            <a-input v-model:value="form.wx1" type="hidden" />
            <a-upload
              list-type="picture-card"
              class="avatar-uploader"
              :headers="headers"
              :show-upload-list="false"
              :customRequest="uploadwx1"
            >
              <img v-if="wx1Url" :src="wx1Url" alt="avatar" class="imageUrl" style="max-width: 400px" />
              <div v-else>
                <div class="ant-upload-text">上传主图</div>
              </div>
            </a-upload>
          </a-form-item>
          <a-form-item label="微信二:" name="wx2">
            <a-input v-model:value="form.wx2" type="hidden" />
            <a-upload
              list-type="picture-card"
              class="avatar-uploader"
              :headers="headers"
              :show-upload-list="false"
              :customRequest="uploadwx2"
            >
              <img v-if="wx2Url" :src="wx2Url" alt="avatar" class="imageUrl" style="max-width: 400px" />
              <div v-else>
                <div class="ant-upload-text">上传主图</div>
              </div>
            </a-upload>
          </a-form-item>
        </a-col>
        <a-col :offset="10">
          <a-button type="primary" shape="round" size="large" @click="save"> 保存 </a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>

<script>
import { ConfigApi } from '@/api/config/ConfigApi';
import setting from '@/config/setting';
import { FileApi } from '@/api/FileApi';

export default {
  name: 'ContactUs',
  components: {},
  data() {
    return {
      config: { height: 530 },
      // 表单数据
      form: Object.assign({}),
      wx1Url: null,
      wx2Url: null,
      addressMapUrl: null,
      // 表单验证规则
      rules: {
        content: [
          {
            required: true,
            message: '请输入内容',
            type: 'string',
            trigger: 'blur'
          }
        ]
      },
      // 上传文件时候要带header
      headers: {
        Authorization: setting.takeToken()
      },
      // 提交状态
      loading: false
    };
  },
  async created() {
    //获取数据
    let data = ConfigApi.getContactUs();
    data.then(data => {
      this.form = data;
      if (this.form.addressMap != null && this.form.addressMap != '') {
        this.addressMapUrl = '/api/wx/sysFileInfo/public/preview?fileId=' + this.form.addressMap;
      }
      if (this.form.wx1 != null && this.form.wx1 != '') {
        this.wx1Url = '/api/wx/sysFileInfo/public/preview?fileId=' + this.form.wx1;
      }
      if (this.form.wx2 != null && this.form.wx2 != '') {
        this.wx2Url = '/api/wx/sysFileInfo/public/preview?fileId=' + this.form.wx2;
      }
    });
  },
  methods: {
    /**
     * 保存和编辑
     *
     * @author liuxue
     * @date 2021/12/06 14:18
     */
    async save() {
      console.log(this.form);
      // 校验表单
      await this.$refs.form.validate();

      // 修改加载框为正在加载
      this.loading = true;
      this.form.name = 'contactUs';
      // 执行编辑
      let result = ConfigApi.saveContactUs(this.form);
      result
        .then(result => {
          // 移除加载框
          this.loading = false;

          // 提示添加成功
          this.$message.success(result.message);
        })
        .catch(() => {
          this.loading = false;
        });
    },
    /**
     * 上传地址图片
     */
    uploadAddressMap(file) {
      this.loading = true;
      let formData = new FormData();
      formData.append('file', file.file);
      let uploadResult = FileApi.commonUpload('N', formData);
      uploadResult
        .then(result => {
          // 移除加载框
          this.loading = false;
          // 提示添加成功
          this.$message.success(result.message);

          this.form.addressMap = result.data.fileId;
          this.addressMapUrl = result.data.fileUrl;
        })
        .catch(() => {
          this.loading = false;
        });
      return false;
    },
    /**
     * 上传wx2图片
     */
    uploadwx2(file) {
      this.loading = true;
      let formData = new FormData();
      formData.append('file', file.file);
      let uploadResult = FileApi.commonUpload('N', formData);
      uploadResult
        .then(result => {
          // 移除加载框
          this.loading = false;
          // 提示添加成功
          this.$message.success(result.message);

          this.form.wx2 = result.data.fileId;
          this.wx2Url = result.data.fileUrl;
        })
        .catch(() => {
          this.loading = false;
        });
      return false;
    },
    /**
     * 上传wx1图片
     */
    uploadwx1(file) {
      this.loading = true;
      let formData = new FormData();
      formData.append('file', file.file);
      let uploadResult = FileApi.commonUpload('N', formData);
      uploadResult
        .then(result => {
          // 移除加载框
          this.loading = false;
          // 提示添加成功
          this.$message.success(result.message);

          this.form.wx1 = result.data.fileId;
          this.wx1Url = result.data.fileUrl;
        })
        .catch(() => {
          this.loading = false;
        });
      return false;
    }
  }
};
</script>
